import Vue from 'vue';
import { Subject } from 'rxjs';
import { Component, Prop } from 'vue-property-decorator';
import VueDraggableResizable from 'vue-draggable-resizable';
import { CtrlEvent, ISheetParam } from '../../interface';
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
import './app-visual-ctrl.less';

/**
 * 自定义绘制控件
 *
 * @export
 * @class AppVisualCtrl
 * @extends {Vue}
 */
@Component({
    components: {
        'vue-draggable-resizable': VueDraggableResizable
    }
})
export class AppVisualCtrl extends Vue {

    /**
     * 控件位置信息
     *
     * @type {*}
     * @memberof AppVisualCtrl
     */
    @Prop() position!: any;

    /**
     * 控件ID
     *
     * @type {*}
     * @memberof AppVisualCtrl
     */
    @Prop() id!: string;

    /**
     * 是否可设计控件
     *
     * @type {*}
     * @memberof AppVisualCtrl
     */
    @Prop() enableDesgin?: boolean;

    /**
     * @description sheet状态通知对象
     * @type {Subject<ISheetParam>}
     * @memberof AppVisualCtrl
     */
    @Prop() public sheetState !: Subject<ISheetParam>;

    /**
     * @description 是否激活
     * @type {boolean}
     * @memberof AppVisualCtrl
     */
    public isActive: boolean = false;

    /**
     * @description 初始化完成
     * @memberof AppVisualCtrl
     */
    public mounted() {
        this.$emit(CtrlEvent.INITD, this.getEmitParam());
    }

    /**
     * @description 激活
     * @memberof AppVisualCtrl
     */
    public onActivated() {
        this.isActive = true;
        this.$emit(CtrlEvent.ACTIVATED, this.getEmitParam());
    }

    /**
     * @description 取消激活
     * @memberof AppVisualCtrl
     */
    public onDeactivated() {
        this.isActive = false;
        this.$emit(CtrlEvent.DEACTIVATED, this.getEmitParam());
    }

    /**
     * @description 拖拽停止
     * @memberof AppVisualCtrl
     */
    public onDragstop(x: number, y: number) {
        this.position.left = x;
        this.position.top = y;
        this.$emit(CtrlEvent.DRAG, this.getEmitParam());
    }

    /**
     * @description 调整大小
     * @memberof AppVisualCtrl
     */
    public onResizestop(x: number, y: number, width: number, height: number) {
        this.position.left = x;
        this.position.top = y;
        this.position.width = width;
        this.position.height = height;
        this.$emit(CtrlEvent.RESIZE, this.getEmitParam());
    }

    /**
     * @description 获取抛出参数
     * @return {*} 
     * @memberof AppVisualCtrl
     */
    public getEmitParam() {
        return {
            id: this.id,
            type: 'CTRL',
            position: this.position
        }
    }

    /**
     * @description 处理删除部件
     * @param {MouseEvent} event
     * @memberof AppVisualCtrl
     */
    public handleRemove(event: MouseEvent) {
        event.stopPropagation();
        this.$emit(CtrlEvent.REMOVE, this.getEmitParam());
    }

    /**
     * @description 绘制组件
     * @return {*} 
     * @memberof AppVisualCtrl
     */
    public render() {
        return (
            <vue-draggable-resizable draggable={this.enableDesgin} resizable={this.enableDesgin}
                style={{ zIndex: 300 }} w={this.position.width} h={this.position.height}
                x={this.position.left} y={this.position.top}
                onActivated={() => { this.onActivated() }}
                onDeactivated={() => { this.onDeactivated() }}
                onDragstop={(x: number, y: number) => { this.onDragstop(x, y) }}
                onResizestop={(x: number, y: number, width: number, height: number) => { this.onResizestop(x, y, width, height) }}
                class="app-visual-ctrl"
            >
                <div id={this.id} style="width:100%;height:100%;overflow:hidden;">
                    {this.$slots.default}
                </div>
                {
                    this.isActive ?
                        <div class="luckysheet-modal-dialog-controll">
                            <span class="luckysheet-modal-controll-btn" onClick={(event: MouseEvent) => { this.handleRemove(event); }}>
                                <i class="fa fa-trash" />
                            </span>
                        </div> : null
                }
            </vue-draggable-resizable>
        )
    }

}